<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酒店登记表</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>酒店登记表</title>
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: linear-gradient(
              to right,
              rgb(218, 183, 255),
              rgb(251, 182, 183)
            );
            margin: 0;
          }

          .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            /* box-shadow: 0 10 10px rgba(238, 55, 55, 0.1), 0 0 20px white; */
            box-shadow: 0 30px 80px #7c6191, 0 0 0 20px #fff;
            width: 400px;
          }

          h2 {
            text-align: center;
          }

          .form-group {
            margin-bottom: 10px;
          }

          label {
            display: inline-block;
            width: 100px;
          }

          input[type="text"],
          input[type="number"],
          input[type="email"] {
            width: calc(100% - 50px);
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
          }

          button {
            margin-top: 10px;
            padding: 8px 15px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 3px;
          }

          button:hover {
            background-color: #45a049;
          }

          /* .hidden {
            display: none;
          } */

          #displayInfo {
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 3px;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <h2>酒店登记表</h2>
          <form id="registrationForm">
            <div class="form-group">
              <label for="name">姓名：</label>
              <input type="text" id="name" required />
            </div>
            <div class="form-group">
              <label for="age">年龄：</label>
              <input type="number" id="age" required />
            </div>
            <div class="form-group">
              <label for="address">家庭住址：</label>
              <input type="text" id="address" required />
            </div>
            <div class="form-group">
              <label for="email">邮箱：</label>
              <input type="email" id="email" required />
            </div>
            <div class="form-group">
              <label for="salary">工资：</label>
              <input type="text" id="salary" required />
            </div>
            <button type="button" onclick="displayInfo()">提交</button>
          </form>
          <div id="displayInfo" hidden>
            <!-- 这里用于展示填写后的信息 -->
          </div>
        </div>

        <script>
          function displayInfo() {
            // 获取表单中的值
            let name = document.getElementById("name").value;
            let age = document.getElementById("age").value;
            let address = document.getElementById("address").value;
            let email = document.getElementById("email").value;
            let salary = document.getElementById("salary").value;

            // 构造展示的信息字符串
            let info = `我叫${name}，我今年${age}岁，我住在${address}，我的邮箱是${email}，我工资是${salary}元。`;

            // 显示信息
            let displayElement = document.getElementById("displayInfo");
            // 使用 textContent 时，它会将提供的文本作为纯文本处理，不会解析其中的 HTML
            displayElement.textContent = info;
            // displayElement.innerHTML = info;
            // displayElement.classList.remove("hidden")
            if (info) {
              displayElement.hidden = false;
            }
          }
        </script>
      </body>
    </html>
  </body>
</html>
